<template>
  <el-aside width="200px">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="activePath"
      router
    >
      <el-menu-item
        v-for="(m, idx) in asideInfo"
        :key="m.id"
        :index="(idx + 1).toString()"
        :route="m.path"
        @click="saveNavState((idx + 1).toString())"
      >
        <i :class="iconObj[m.id]"></i>
        <span slot="title">{{ m.name }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Aside",
  props: ["asideInfo"],
  data() {
    return {
      iconObj: {
        1: "el-icon-menu",
        2: "el-icon-menu",
        3: "el-icon-message",
      },
      // 被激活的链接地址
      activePath: "1",
    };
  },
  methods: {
    // 保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
  },
  mounted() {
    // 获取被激活的地址
    this.activePath = window.sessionStorage.getItem("activePath") || "1";
  },
};
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #545c64;
  .el-menu {
    border-right: none;
  }
}
</style>
